var data = { pageCount: 5, pageNum: 1 };
//  点击分页的按钮上
$('#btnGroup').click(function (e) {
    //  如果点击在分页组的按钮上 则获取按钮上的内容 并*1转数值型
    if (e.target.nodeName == "BUTTON") {
        console.log(e.target.innerHTML * 1)
        //  将按钮上的值赋值给data里的pageNum
        data['pageNum'] = e.target.innerHTML * 1
        //  调用渲染页面的函数,并将重新赋值的data当作实参传递
        loadPage(data)
    }
})
//  点击查询按钮
$('#searchBtn').click(function () {
    //  点击查询按钮获取最高工资 最低工资 姓名 3个input的值
    var max = $('#maxSalary').val()
    var min = $('#minSalary').val()
    var name = $('#uname').val()
    //  将data里的最高值 最低值重新赋值 
    data['min'] = min;
    data['max'] = max;
    data['uname'] = name;
    data['pageNum'] = 1
    //  调用渲染页面的函数,并将重新赋值的data当作实参传递
    loadPage(data)
})
//  获取pageCount
function getPageCount() {
    // console.log(selPageCount.value * 1)
    //  获取select选项里option的值 赋值给data中的每页总数
    data['pageCount'] = $('#selPageCount').val() * 1
    // console.log(data['pageCount'])
    //  将data中pageNum重新赋值 刷新当前页到第一页
    data['pageNum'] = 1
    //  调用渲染页面的函数,并将重新赋值的data当作实参传递
    loadPage(data)
}
function loadPage(_data) {
    console.log(_data);
    //  jQuery封装的ajax;
    $.ajax({
        url: `http://127.0.0.1:3000/member/list`,
        type: 'get',
        data: _data,
        dataType: 'json'
    }).then(res => {
        console.log(res);
        var { code, proList, totalCount } = res;
        if (code == 200) {
            $('#tab').html(
                proList.map(value => {
                    const { lid, uname, sex, tel, address, birthday, salary, dname } = value;
                    // console.log(lid,uname,sex,tel,address,birthday,salary);
                    return `
                    <tr>
                        <td>${lid}</td>
                        <td>${uname}</td>
                        <td>${sex ? '男' : '女'}</td>
                        <td>${tel}</td>
                        <td>${address}</td>
                        <td>${moment(birthday).format('YYYY/MM/DD')}</td>
                        <td>${dname}</td>
                        <td>${salary}</td>
                        <td><button onclick="updateBtn(this)">修改</button><button onclick="deleteBtn(${lid})">删除</button></td>
                    </tr>
                    `
                }).join('')
            )
            var btnCount = Math.ceil(totalCount / _data.pageCount);
            var btnHTML = ``;
            for (var i = 0; i < btnCount; i++) {
                btnHTML += `<button class="${_data.pageNum == (i + 1) ? 'active' : ''}">${i + 1}</button>`
            }
            btnGroup.innerHTML = btnHTML
        } else {
            tab.innerHTML = '查询失败'
            btnGroup.innerHTML = ``
        }
    })
}
// loadPage(data)
//  点击删除按钮触发的事件
function deleteBtn(element) {
    console.log(element);
    // var deleteIndex = e.parentNode.parentNode;
    // console.log(deleteIndex);
    if (confirm('是否确认操作')) {
        var lid=element
        console.log({lid});
        var url = `http://127.0.0.1:3000/member/delete`
        $.post(url, { lid }, data => {
            console.log(lid);
            // console.log(data);
            if (data.code == 200) {
                alert('员工信息删除成功')
                $('#searchBtn').click()
            } else {
                alert('员工信息删除失败')
            }
        })
    }
}


//  点击修改按钮触发的
function updateBtn(e) {
    console.log(e);
    var uname = e.parentNode.parentNode.children[1].innerHTML
    console.log(uname);
    $('.updateul').fadeIn(1000);
    var url = `http://127.0.0.1:3000/member/?uname=${uname}`
    $.get(url, res => {
        // console.log(res);
        if (res.code == 200) {
            $('.updateul').html(
                res.data.map(value => {
                    const { lid, uname, sex, tel, address, birthday, salary, deptid } = value
                    $('#upsex').ready(function () {
                        $('#upsex').val(`${sex}`);
                    });
                    $('#updepartment').ready(function () {
                        $('#updepartment').val(`${deptid}`);
                    });
                    return `
                    <li>
            <h1>请修改员工信息</h1>
        </li>
        <li>
            <span>员工编号</span>
            <input id="uplid" value="${lid}" type="text" disabled>
        </li>
        <li>
            <span>请修改员工姓名</span>
            <input value="${uname}" type="text" id="upuname">
        </li>
        <li>
            <span>请修改员工性别</span>
            <select id="upsex">
                <option value="0">女</option>
                <option value="1">男</option>
            </select>
        </li>
        <li>
            <span>请修改员工手机号</span>
            <input value="${tel}" type="text" id="uptel">
        </li>
        <li>
            <span>请修改员工地址</span>
            <input value="${address}" type="text" id="upaddress">
        </li>
        <li>
            <span>请修改员工生日</span>
            <input value="${moment(birthday).format('YYYY/MM/DD')}" type="text" id="upbirthday">
        </li>
        <li>
            <span>请选择员工所属部门</span>
            <select id="updepartment">
                <option value="10">销售部</option>
                <option value="20">售后前台</option>
                <option value="30">售后车间</option>
                <option value="40">财务部</option>
                <option value="50">行政部</option>
            </select>
        </li>
        <li>
            <span>请修改员工工资</span>
            <input value="${salary}" type="text" id="upsalary">
        </li>
        <li><button onclick="uphold(this)" class="confirmBtn" >确认修改</button></li>
                    `
                })
            )
        }
    })
}
//  点击确认修改按钮触发的事件
function uphold(e) {
    console.log(e);
    const lid = $('#uplid').val()
    const uname = $('#upuname').val()
    const sex = $('#upsex').val()
    const tel = $('#uptel').val()
    const address = $('#upaddress').val()
    const birthday = $('#upbirthday').val()
    const deptid = $('#updepartment').val()
    const salary = $('#upsalary').val()
    // console.log(lid,uname,sex,tel,address,birthday,deptid,salary);
    const params = { lid, uname, sex, tel, address, birthday, deptid, salary };
    console.log(params);
    var url = `http://127.0.0.1:3000/member/update`
    $.post(url, params, data => {
        console.log(data);
        if (data.code == 200) {
            $('.updateul').html('员工信息修改成功，即将刷新页面')
        } else {
            alert('信息修改失败，请再次尝试')
        }
    })
    $('.updateul').fadeOut(3000);
    $('#searchBtn').click()
}


